<template>
  <div v-if="mhmId !== 1" class="o-container">
    <span class="title-line" />
    <span class="title">{{ title }}</span>
    <el-form v-model="formData">
      <el-form-item prop="use_platform" :label="subTitle">
        <el-switch v-model="formData.use_platform" :active-value="1" :inactive-value="0" :disabled="disabled" @change="setPayment" />
        <div v-show="usedTips && formData.use_platform === 0" class="tips">{{ usedTips }}</div>
        <div v-show="unUsedTips && formData.use_platform === 1 " class="tips">{{ unUsedTips }}</div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'UsePlatformConfig',
  props: {
    title: {
      type: String,
      default: '配置'
    },
    subTitle: {
      type: String,
      default: '使用平台配置'
    },
    configKey: {
      type: String,
      required: true
    },
    usedTips: {
      type: String,
      default: ''
    },
    unUsedTips: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      formData: {
        use_platform: 1
      },
      disabled: false
    }
  },
  computed: {
    ...mapGetters('login', ['mhmId'])
  },
  created() {
    this.loadPaymentConfig()
  },
 methods: {
   loadPaymentConfig() {
     this.$http.get(
         '/admin/system/config',
         {
           __key: this.configKey
         },
         ({ data }) => {
           if (data) {
             this.formData.use_platform = data.use_platform || 0
           } else {
             this.formData.use_platform = 1
           }
           this.$emit('change', this.formData.use_platform)
         },
         error => {
           this.$message.error(error.msg);
         },
         false
     );
   },
   // 保存配置
   setPayment() {
     this.disabled = true
     this.$http.post(
         '/admin/system/config/save',
         {
           ...this.formData,
           __key: this.configKey
         },
         response => {
           this.$emit('change', this.formData.use_platform)
           this.disabled = false;
         },
         error => {
           this.disabled = false;
           this.$message.error(error.msg);
         },
         false
     );
   }
 }
}
</script>

<style scoped lang="scss">
.o-container{
  padding: 0 20px;
  margin-top: 20px;
  .title-line {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.8;
    padding-left: 8px;
    border-left: 4px solid #5193FF;
  }
}

.tips {
  font-size: 12px;
  color: #8C8C8C;
  margin: 7px 0 0 0;
  height: 12px;
  line-height: 12px;
}

</style>
